<template>
  <div class="mod-service-notifyTemplate">
    <!-- 搜索相关区域 -->
    <div class="search-bar">
      <el-form
        ref="searchFormRef"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        @submit.prevent
      >
        <div class="input-row">
          <el-form-item
            label="消息类型"
            prop="sendType"
          >
            <el-select
              v-model="searchForm.sendType"
              clearable
              placeholder="选择消息类型"
              filterable
            >
              <el-option
                v-for="item in sendTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="发送类型"
            prop="msgType"
          >
            <el-select
              v-model="searchForm.msgType"
              clearable
              placeholder="选择发送类型"
            >
              <el-option
                v-for="item in searchTypesMessage"
                :key="item.key"
                :label="item.name"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onPageChange(1)"
            >
              {{ $t('product.search') }}
            </div>
            <div
              class="default-btn"
              @click="onResetSearch()"
            >
              {{ $t('product.reset') }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <!-- 新增按钮 -->
      <!-- <div class="operation-bar">
        <div
          v-if="isAuth('platform:notifyTemplate:save')"
          class="default-btn primary-btn"
          @click="onAddOrUpdate()"
        >
          {{ $t('crud.addTitle') }}
        </div>
      </div> -->
      <div class="table-con prod-table">
        <div class="table-con">
          <el-table
            ref="notifyTemplateTableRef"
            :data="dataList"
            header-cell-class-name="table-header"
            row-class-name="table-row-low"
            style="width: 100%"
          >
            <el-table-column
              :label="$t('brand.serialNumber')"
              type="index"
              width="80"
            />
            <!-- 消息模板列表 -->
            <el-table-column
              prop="templateId"
              :label="$t('platform.msgTemplate')"
              width="120"
            >
              <template #default="scope">
                {{ scope.row.templateId }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('platform.msgType')"
              prop="sendType"
              width="200"
            >
              <template #default="scope">
                <span>
                  {{
                    sendTypes.find(d => d.value == scope.row.sendType)?.label
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              :label="$t('platform.notifyConten')"
              prop="message"
              width="500"
            />
            <el-table-column
              :label="$t('platform.canUseNotice')"
              prop="templateTypeStr"
              width="180"
            />
            <el-table-column
              :label="$t('platform.smsTemplateCode')"
              prop="templateCode"
              width="180"
            >
              <template #default="scope">
                {{ scope.row.templateCode ? scope.row.templateCode : '-' }}
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('platform.sendType')"
              prop="sendType"
            >
              <template #default="scope">
                <span v-if="scope.row.msgType == 2">{{ $t('platform.seller') }}</span>
                <span v-if="scope.row.msgType == 1">{{ $t('platform.buyer') }}</span>
                <span v-if="scope.row.msgType == 3">平台</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              :label="$t('publics.operating')"
              fixed="right"
              width="100"
            >
              <template #default="scope">
                <div
                  v-if="isAuth('platform:notifyTemplate:update')"
                  class="default-btn text-btn"
                  @click="onAddOrUpdate(scope.row.templateId)"
                >
                  {{ $t('crud.updateBtn') }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          v-if="dataList.length"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="onPageSizeChange"
          @current-change="onPageChange"
        />
      </div>
    </div>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="refreshChange"
    />
  </div>
</template>
<script setup>
import AddOrUpdate from './add-or-update.vue'
import { isAuth } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})
let searchForm = reactive({
  sendType: null,
  msgType: null
}) // 搜索
const searchFormRef = ref(null)
const dataListLoading = ref(false)
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null)
const sendTypes = [{
  value: 1,
  label: $t('platform.orderPay')
}, {
  value: 2,
  label: $t('platform.paySuccNotify')
}, {
  value: 3,
  label: $t('platform.merAgreeReturn')
}, {
  value: 4,
  label: $t('order.refusedRefund')
}, {
  value: 5,
  label: $t('platform.wriOffRem')
}, {
  value: 6,
  label: $t('platform.shipRem')
}, {
  value: 7,
  label: $t('platform.groupFailRem')
}, {
  value: 8,
  label: $t('platform.groupSuccRem')
}, {
  value: 9,
  label: $t('platform.startGroupRem')
}, {
  value: 10,
  label: $t('platform.memUpRem')
}, {
  value: 11,
  label: $t('platform.timeoutRem')
}, {
  value: 12,
  label: $t('platform.register')
}, {
  value: 13,
  label: $t('platform.login')
}, {
  value: 14,
  label: $t('platform.updatePassword')
}, {
  value: 15,
  label: $t('platform.vaild')
}, {
  value: 16,
  label: $t('platform.orderBalanceRefundSuccess')
}, {
  value: 21,
  label: '完善价格信息通知'
}, {
  value: 22,
  label: '新询价通知'
}, {
  value: 23,
  label: '确认报价通知'
}, {
  value: 24,
  label: '询价单逾期通知'
}, {
  value: 25,
  label: '询价单取消通知'
}, {
  value: 26,
  label: '新采购订单通知'
}, {
  value: 27,
  label: '采购订单支付成功通知'
}, {
  value: 28,
  label: '采购订单退款通知'
}, {
  value: 29,
  label: '采购订单退货退款通知'
}, {
  value: 30,
  label: '采购订单确认收货通知'
}, {
  value: 102,
  label: $t('platform.confirmReceRem')
}, {
  value: 103,
  label: $t('platform.buyerRefundRem')
}, {
  value: 104,
  label: $t('platform.buyerReturnRem')
}, {
  value: 105,
  label: $t('platform.buyerPaySuccessRem')
}, {
  value: 106,
  label: $t('platform.productRemovalReminder')
}, {
  value: 107,
  label: $t('platform.commodityAuditResultReminder')
}, {
  value: 110,
  label: $t('platform.ReminderMarketingActivityOffShelf')
}, {
  value: 111,
  label: $t('platform.ActivityAuditResultReminder')
}, {
  value: 112,
  label: '注册积分到账通知'
}, {
  value: 113,
  label: '登录积分到账通知'
}, {
  value: 114,
  label: '邀请注册积分到账通知'
}, {
  value: 115,
  label: '提交反馈积分到账通知'
}, {
  value: 116,
  label: '反馈采纳积分到账通知'
}, {
  value: 117,
  label: '绑定手机积分到账通知'
}, {
  value: 118,
  label: '填写真实姓名积分到账通知'
}, {
  value: 119,
  label: '完善公司信息积分到账通知'
}, {
  value: 120,
  label: '完善职位信息积分到账通知'
}, {
  value: 121,
  label: '系统增加积分通知'
}, {
  value: 122,
  label: '系统减少积分通知'
}]
const searchTypesMessage = [{
  key: 1,
  name: $t('platform.buyer')
}, {
  key: 2,
  name: $t('platform.seller')
}, {
  key: 3,
  name: '平台'
}]

onMounted(() => {
  getDataList()
})
const getDataList = (pageParam) => {
  dataListLoading.value = true
  http({
    url: http.adornUrl('/platform/notifyTemplate/page'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          current: pageParam == null ? page.currentPage : pageParam.currentPage,
          size: pageParam == null ? page.pageSize : pageParam.pageSize
        },
        searchForm
      )
    )
  }).then(({ data }) => {
    if (data) {
      data.records.forEach(el => {
        el.templateTypeStr = setTemplateTypesStr(el.templateTypeList.sort())
      })
      dataList.value = data.records
      page.total = data.total
    } else {
      dataList.value = []
      page.total = 0
    }
    dataListLoading.value = false
  })
}

const setTemplateTypesStr = (list) => {
  let listStr = ''
  const types = [
    '',
    $t('sysManagement.shortMessage'),
    $t('shop.officialAccount'),
    $t('platform.applet'),
    '企微助手通知'
  ]
  list.forEach(el => {
    listStr += types[el] + '、'
  })
  return listStr.substring(0, listStr.length - 1)
}

// 新增 / 修改
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init(id)
  })
}
const onDelete = (row) => {
  // `确定进行[${row.status === 0 ? '启用' : '禁用'}]操作?`
  let tip = $t('remindPop.makeSure') + '[' + (row.status === 0 ? $t('brand.enAble') : $t('brand.disable'))
  tip = tip + ']' + $t('remindPop.operation') + '?'
  ElMessageBox.confirm(tip, $t('remindPop.remind'), {
    confirmButtonText: $t('remindPop.confirm'),
    cancelButtonText: $t('remindPop.cancel'),
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl('/platform/notifyTemplate/' + row.templateId),
      method: 'delete',
      data: http.adornData({})
    }).then(() => {
      ElMessage({
        message: $t('publics.operation'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          refreshChange()
        }
      })
    })
  }).catch(() => { })
}
/**
 * 刷新回调
 */
const refreshChange = () => {
  getDataList(page)
}
const onSearch = (params) => {
  searchForm = params
  getDataList(page)
}
const onPageSizeChange = (val) => {
  page.pageSize = val
  getDataList()
}
const onPageChange = (val) => {
  page.currentPage = val
  getDataList()
}
/**
 * 重置表单
 */
const onResetSearch = () => {
  searchFormRef.value.resetFields()
}

defineExpose({
  onSearch,
  onDelete
})
</script>
<style lang="scss" scoped>
</style>
